<template>
  <div>
    <div id="pieModal" ref="pieModal" style="height:250px;margin-bottom:16px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'PieModal',
  data () {
    return {
      mychart: {},
      chartData: {
        name: '工单情况',
        data: [
          { name: '已处理', value: 843 },
          { name: '未处理', value: 124 }
        ],
        total: 967
      }
    }
  },
  mounted () {
    this.initChart()
    window.addEventListener('resize', () => {
      setTimeout(() => {
        this.mychart.resize()
      }, 500)
    })
  },
  methods: {
    initChart () {
      this.mychart = echarts.init(this.$refs.pieModal)
      const option = {
        backgroundColor: 'rgb(12,16,61)',
        color: ['rgb(13,95,245)', 'rgb(29,207,227)'],
        title: {
          text: this.chartData.name,
          left: 'center',
          textStyle: {
            color: '#fff',
            fontSize: '14',
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          // 内环
          {
            name: this.chartData.name,
            type: 'pie',
            radius: [0, '65%'],
            label: {
              normal: {
                position: 'inner',
                formatter: params => {
                  // var str = params.name + params.value
                  return (params.value / this.chartData.total).toFixed(2) * 100
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [...this.chartData.data]
          },
          // 外环
          {
            name: this.chartData.name,
            type: 'pie',
            radius: [0, '65%'],
            label: {
              normal: {
                color: '#fff',
                formatter: function (params) {
                  var str = params.name + params.value
                  return str.length < params.name.length
                    ? str
                    : `${str.slice(0, params.name.length)}\n${str.slice(params.name.length)}`
                }
              }
            },
            data: [...this.chartData.data]
          }
        ]
      }
      this.mychart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped></style>
